<template>
  <!-- 渲染歌曲组件 -->
  <div class="song_box">
    <div class="header">
      <div class="ranking"></div>
      <div class="name">标题</div>
      <div class="timer">时长</div>
      <div class="singer">歌手</div>
    </div>
    <div class="song_box_body">
      <div
        class="item"
        v-for="(item, index) in songs"
        :key="item.id"
        :class="index % 2 == 0 ? 'item_active' : ''"
        @dblclick="addPlaySong(item)"
      >
        <div class="ranking">{{ index + 1 }}</div>
        <div class="name">
          <span class="song_name">{{ "  " + item.name }}</span>
          <span v-if="item.alia.join('/') != ''" style="margin: 0 6px">-</span>
          <span class="song_alia">{{ item.alia.join("/") }}</span>
        </div>
        <div class="timer">{{ getTimer(item.dt) }}</div>
        <div class="singer">{{ getAllSingers(item.ar) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, inject } from "vue";
import { completeFormatDate } from "@/utils/formate.js";
export default defineComponent({
  name: "RankingListSongItem",
  setup(props, context) {
    let songs = inject("songs");

    // 整理出所有的歌手
    let getAllSingers = (arr) => {
      return arr.map((ele) => ele.name).join("/");
    };

    // 获取时长
    let getTimer = (timer) => {
      let time = new Date(timer);
      return completeFormatDate(time, "mm:ss");
    };

    // 双击播放歌曲事件
    let addPlaySong = (item) => {
      context.emit("addPlaySong", item);
    };

    return { songs, getAllSingers, getTimer, addPlaySong };
  },
});
</script>
<style scoped>
.song_box {
  width: 100%;
  margin-top: 20px;
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #c20c0c;
  font-size: 18px;
  color: #222;
}
.ranking {
  width: 120px;
}
.name {
  flex: 1;
}

.timer {
  width: 120px;
}

.singer {
  width: 200px;
}

.song_box_body {
  width: 100%;
}

.item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  transition: all 0.1s;
}

.item:hover {
  background-color: #ccc;
}

.ranking,
.name,
.timer,
.singer {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 16px;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}

.item .ranking,
.item .timer,
.item .name .song_alia {
  color: #888;
}
.item .name,
.item .singer {
  color: #222;
}
.item .name .song_alia,
.item .name .song_name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item .ranking {
  padding-left: 20px;
}

.item_active {
  background-color: #eee;
}
</style>
